<template>
    <h2>显示房号列表</h2>
    房号名称
    <input type="text" v-model="Name"/>
    创建时间
    <input type="date" v-model="DTime"/>
    <input type="button" value="查询" @click="Show"/>
    <input type="text" v-model="path"/>
    <input type="button" value="导出" @click="DaoChu"/>
    <table border="1">
        <thead>
            <tr>
                <td>房号编号</td>
                <td>房号名称</td>
                <td>创建时间</td>
                <td>状态</td>
                <td>备注</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.trN_Id}}</td>
                <td>{{item.trN_Name}}</td>
                <td>{{moment(item.trN_Date).format("YYYY-MM-DD")}}</td>
                <td>{{item.trN_State==true?"上架":"下架"}}</td>
                <td>{{item.trN_Info}}</td>
                <td>
                    <input type="button" value="修改" @click="Xiu(item.trN_Id)"/>
                    <input type="button" value="修改状态" @click="Zhuang(item.trN_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRoute,useRouter} from 'vue-router';
    const route=useRoute();
    const router=useRouter();
    import moment from "moment";

    onMounted(()=>{
        Show();
    })

    const info=ref([{
        trN_Id:0,
        trN_Name: "",
        trN_Date:"",
        trN_State: true,
        trN_Info: ""
    }]);

    const Name=ref("");
    const DTime=ref("");

    //显示房号
    const Show=()=>{
        axios.get("https://localhost:7038/api/RoomNumber/GetRoomNumbers",{
            params:{
                Name:Name.value,
                DTime:DTime.value
            }
        })
        .then(res=>{
            info.value=res.data;
            
        })
        .catch(err=>{
            console.log(err);
        })
    }

    //修改
    const Xiu=(id:number)=>{
        router.push({
            name:"UpdateRoomNumber",
            params:{
                id:id
            }
        })
    }

    //修改状态
    const Zhuang=(id:number)=>{
        if(confirm("确定要切换吗？")){
            axios.get("https://localhost:7038/api/RoomNumber/UpdateStatee",{
            params:{
                id:id
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('切换成功');
                Show();
            }
            else{
                alert('切换失败');
            }
        })
        }
    }

    const path=ref("");
    //导出
    const DaoChu=()=>{
        axios.get("https://localhost:7038/api/RoomNumber/DaoChu",{
            params:{
                path:path.value
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('导出成功');
            }
            else{
                alert('导出失败');
            }
        })
    }

</script>
